<!-- 底部操作按钮 -->
<template>
  <section>
    <div class="btn-group">
      <div class="group-left">
        <el-button class="search-btn" v-if="showBack" size="small" @click="handleBack">{{$t('LastStep')}}</el-button>
      </div>
      <div class="group-right">
        <el-button class="white-btn" @click="handleCancel">{{$t('cancel')}}</el-button>
        <el-button class="search-btn" size="small" v-if="showSave" @click="handleSave">{{$t('save')}}</el-button>
        <el-button class="search-btn" @click="handleNext">{{nextName}}</el-button>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  name: 'BottomBtn',
  props: {
    showBack: {
      type: Boolean,
      default: false
    },
    nextName: {
      type: String,
      default: 'Next'
    },
    showSave: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleBack () {
      this.$emit('back')
    },
    handleCancel () {
      this.$emit('cancel')
    },
    handleSave () {
      this.$emit('save')
    },
    handleNext () {
      this.$emit('next')
    }
  }
}
</script>
<style lang="scss" scoped>
.dark-btn {
  background-color: #000;
  color: #fff;
}
hr {
  background-color: #979797;
}
.btn-group {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
